<%@ page import="com.ywb.entity.EduSubject" %>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>

</head>
<body>
<!-- page heading start-->
<div class="page-heading">
    <h3>
        课程分类列表
    </h3>
    <ul class="breadcrumb">
        <li>
            <a href="#"> 主页 </a>
        </li>
        <li>
            <a href="#"> 课程分类管理 </a>
        </li>
        <li class="active"> 课程分类列表 </li>
    </ul>
</div>
<!-- page heading end-->

<!--body wrapper start-->
<div class="wrapper">
    <div class="row">
        <div class="col-md-8">
            <div class="panel">
                <div class="panel-heading">
                    Subject List Tree
                    <span class="tools pull-right">
                                <a class="fa fa-chevron-down" href="javascript:;"></a>
                                <a class="fa fa-times" href="javascript:;"></a>
                            </span>
                </div>
                <div class="panel-body">

                    <div id="FlatTree4" class="tree tree-plus-minus tree-solid-line tree-unselectable">

                        <c:forEach items="${list}" var="parent">
                                <%--  一级分类标签--%>
                            <div class="tree-folder" style="display: block;">
                                    <%--  一级分类div--%>
                                <div class="tree-folder-header" data-title="${parent.title}" data-id="${parent.id}">
                                        <%-- 一级分类图标--%>
                                    <i class="fa fa-lemon-o"></i>
                                        <%-- 一级分类名称--%>
                                    <div class="tree-folder-name">${parent.title}
                                            <div class="tree-actions">
                                                <a data-toggle="modal" data-target="#deleteModal" data-id="${parent.id}" data-title="${parent.title}" class="fa fa-trash-o"></a>
                                            </div>
                                    </div>
                                </div>
                                <div class="tree-folder-content" style="display: block;">

                                <c:forEach items="${parent.children}" var="child">
                                    <div class="tree-item" style="display: block;" data-id="${child.id}" data-title="${child.title}">
                                        <i class="tree-dot"></i>
                                        <div class="tree-item-name">
                                            <i class="fa fa-flash"></i>
                                                ${child.title}
                                            <div class="tree-actions">
                                                <a data-toggle="modal" data-target="#deleteModal" data-id="${child.id}" data-title="${child.title}" class="fa fa-trash-o"></a>
                                            </div>
                                        </div>
                                    </div>
                                </c:forEach>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
        </div>
    </div>
<%--    删除Modal--%>
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="deleteModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"> 确定要删除该科目吗 </h4>
                </div>
                <div class="modal-body">
                    <p >科目id</p>
                    <input id="deleteId" type="text" name="title" autocomplete="off" class="form-control placeholder-no-fix" disabled>

                    <p >科目名称</p>
                    <input id="deleteTitle" type="text" name="title" autocomplete="off" class="form-control placeholder-no-fix" disabled>

                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                    <button class="btn btn-warning" type="button" onclick="deleteSubject()">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- modal -->

    <!-- updateModal -->
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="updateModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"> 更新课程分类 </h4>
                </div>
                <div class="modal-body">
                    <p>课程分类id</p>
                    <input id="updateId" type="text" name="title" autocomplete="off" class="form-control placeholder-no-fix" disabled value="">

                    <p>课程分类名称</p>
                    <input id="updateTitle" type="text" name="title" placeholder="e.g" autocomplete="off" class="form-control placeholder-no-fix">

                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">取消</button>
                    <button data-dismiss="modal" class="btn btn-success" type="button" onclick="updateSubject()">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!-- modal -->

</div>
<!--body wrapper end-->

<link rel="stylesheet" type="text/css" href="/js/fuelux/css/tree-style.css" />
<script>

<%--    jquery多重选择器 ,--%>
    $('.tree-item,.tree-folder-header').click (function(event){
        if(!$(event.target).is('.tree-actions a')) {
            var button = $(event.target)
            var id = button.data('id')
            var title = button.data('title')
            $('#updateModal').modal('show')
            $('#updateId').attr("placeholder", id)
            $('#updateTitle').val(title)
        }
    })

/**
 *  点击删除图标的时候 使用event.target获取目标元素
 *  然后使用xx.data('xx'),将目标元素绑定的值取出
 *  放入modal中的input中
  */
    $('.tree-actions a').click (function(event){
        var button = $(event.target)
        var id = button.data('id')
        var title = button.data('title')
        $('#deleteModal').modal('show')
        $('#deleteId').val(id)
        $('#deleteTitle').val(title)

    })


    function deleteSubject(){
        var id = $('#deleteId').val()
        $.ajax({
            url: `/subject/deleteById/` + id,
            success(){
                toastr.success("删除成功!")
                setTimeout(function (){
                    window.location.reload()
                },1000)
            },
            error(){
                toastr.error("删除失败!")
                setTimeout(function (){
                    window.location.reload()
                },1000)
            },
        })

    }

    function updateSubject(){
        var id = $('#updateId').attr("placeholder")
        var title = $('#updateTitle').val()
        $.ajax({
            type: 'post',
            url: '/subject/updateSubject',
            data: {id, title},
            success:function() {
                toastr.success("更新成功!")
                setTimeout(function (){
                    window.location.reload()
                },1000)
            },
            erorr:function() {
                toastr.success("更新成功!")
                setTimeout(function (){
                    window.location.reload()
                },1000)
            }
        })


    }
</script>
<!--tree-->
<script src="/js/fuelux/js/tree.min.js"></script>
<script src="/js/tree-init.js"></script>



</body>
</html>
